<template>
<div id="app" style="height:100%;">
    <div v-transfer-dom>
      <loading v-model="isLoading"></loading>
    </div>
    <view-box ref="viewBox" body-padding-top="47px" body-padding-bottom="0" >
        <x-header class="header" slot="header"
            :left-options="leftOptions"

         >
            <img src="./assets/logo.png" slot="overwrite-title" />
            <a slot="right" class="rightMenu " :class="{active:showMenu}" @click="showMenus">
                <span></span>
                <span></span>
                <span></span>
            </a>
        </x-header>
        <div v-transfer-dom>
            <div class="menus" v-if="showMenu">
                <ul @click="showMenus">
                    <li><router-link :to="{ path: '/'}">E<b>I</b>GN</router-link></li>
                    <li v-for="item in menu"> <router-link :to="{ path: item.route}">{{item.name}}</router-link></li>
                </ul>
            </div>
        </div>
        <transition
        :name="viewTransition" :css="!!direction">
            <keep-alive>
                <router-view ></router-view>
            </keep-alive>
        </transition>
    </view-box>
</div>
</template>

<script>
import { XHeader, ViewBox, Loading, TransferDom, Popover } from 'vux'
import C from './assets/config'
import { mapState, mapActions } from 'vuex'
export default {
    directives:{
        TransferDom
    },
    components:{
        XHeader,
        ViewBox,
        Loading,
        Popover
    },
    name: 'app',
    data() {
        return {
            showMenu:false,
            menu:[

            ]
        }
    },
    created(){
        this.Query('index').then(result => {
            let nav = result.basc.nav;
            this.menu = [
                {name:nav[0].name, route:"/abouts"},{name:nav[1].name, route:"/news"},
                {name:nav[2].name, route:"/cased"}, {name:nav[3].name,route:"/invite"},
                {name:nav[5].name, route:"/offer"}
            ];
        }).catch(os =>{
           alert("数据出错啦");
        });
    },
    methods:{
        showMenus(){
            this.showMenu = !this.showMenu;
        },
        scrollsTop(){
            console.log(111);
        }
    },
    computed:{
        ...mapState({
            route:state => state.route,
            isLoading: state => state.vux.isLoading,
            direction: state => state.vux.direction
        }),
        leftOptions(){
            let path = this.$route.path;
            if( path === '/' ){
                return {
                    showBack: this.$route.path !== '/'
                }
            }
        },
        viewTransition () {
            if (!this.direction) return ''
            return 'vux-pop-' + (this.direction === 'forward' ? 'in' : 'out')
        }
    }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import 'index.less';
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

</style>
